<template>
  <van-search
    ref="search"
    v-model="searchValue"
    :action-text="actionText"
    :background="backgroundColor"
    :label="label"
    :placeholder="placeholder"
    :show-action="isNotEmpty(actionText)"
    class="search"
    :style="{ flex: 1, '--search-backgroud-color': backgroundColor }"
    @cancel="emit('action')"
    @clear="onClear"
    @focus="onfocus"
  >
    <template #right-icon>
      <svg-icon class="center" name="common-cancel" @click="emit('clear')" />
    </template>
    <template #action>
      <svg-icon class="center" name="common-sort" @click="emit('action')" />
    </template>
  </van-search>
  <van-overlay
    :show="showPicker && isNotEmpty(searchValue)"
    :style="{ marginTop: offsetTop }"
    z-index="2002"
    @click="showPicker = false"
  >
    <div style="height: 70vh; overflow: auto">
      <van-cell
        v-for="item in selectOptions"
        :key="item[props.columnsFieldNames.value]"
        :title="item[props.columnsFieldNames.text]"
        @click="onClickItem(item)"
      />
      <van-cell>
        <p class="tip">仅展示前 {{ pageSize }} 条数据</p>
      </van-cell>
    </div>
  </van-overlay>
</template>

<script lang="ts" setup>
import { Ref } from 'vue'
import { getNaviBarColor } from '@/framework/utils/e10'
import _ from 'lodash'
import { QUERY_INTERVAL } from '@/framework/constant'
import { isNotEmpty } from '@/framework/utils/common'

/**
 * 为了保证在e10App中保持头部样式一致
 * 用法说明
 * 1. 不支持搜索 只是显示一个搜索框 点击弹出搜索逻辑
 * <e10-search-bar :search-able="false" @click.stop="onClick" />
 * 2. 支持搜索 传入搜索函数
 * <e10-search-bar v-model="searchValue" @on-search="onSearch" />
 */
const search: Ref<any> = ref()
const searchValue: Ref<string> = ref('')
const showPicker: Ref<boolean> = ref(false)
const props = withDefaults(
  defineProps<{
    modelValue?: any
    selectOptions?: any
    searchAble?: boolean
    backgroundColor?: string
    label?: string
    placeholder?: string
    pageSize?: number
    columnsFieldNames?: any
    actionText?: string
  }>(),
  {
    modelValue: '',
    selectOptions: [],
    searchAble: true,
    backgroundColor: '#00549D',
    label: '',
    placeholder: '请输入搜索关键词',
    pageSize: 30,
    columnsFieldNames: { text: 'label', value: 'value', children: 'children' },
    actionText: undefined
  }
)
const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void
  (e: 'search', searchValue: string): void
  (e: 'getSelectOptions', value: string, pageSize: number): void
  (e: 'action'): void
  (e: 'clear'): void
  (e: 'onClick'): void
}>()
const { label, placeholder, searchAble, pageSize, selectOptions, actionText } = toRefs(props)
const offsetTop = computed(() => search.value?.$el.offsetHeight + 'px')
const onfocus = () => {
  if (!searchAble.value) {
    ;(document as any).activeElement?.blur()
    emit('onClick')
  } else {
    emit('getSelectOptions', searchValue.value, pageSize.value)
    showPicker.value = true
  }
}
const backgroundColor: Ref<string> = ref(props.backgroundColor)
watch(
  () => props.backgroundColor,
  () => (backgroundColor.value = props.backgroundColor)
)
onMounted(() => {
  getNaviBarColor((res: any) => {
    backgroundColor.value = res.barColor
  })
})
watch(
  () => searchValue.value,
  _.debounce(() => emit('getSelectOptions', searchValue.value, pageSize.value), QUERY_INTERVAL)
)
const onClickItem = (item: any) => {
  searchValue.value = item[props.columnsFieldNames.text]
  emit('search', item[props.columnsFieldNames.value])
  showPicker.value = false
}
const onClear = () => {
  emit('clear')
}
</script>

<style lang="less" scoped>
.center {
  display: flex;
  align-items: center;
  text-align: center; /* 水平居中文字 */
  justify-content: center; /* Flexbox方式让文字在按钮内垂直居中 */
}

.search {
  :deep(.van-search__action) {
    background-color: var(--search-backgroud-color) !important;
  }
}
</style>
